两种盒模型（box-sizing）的区别？

CSS 的盒模型是用来设计和布局时使用，由四个部分组成：margin、border、padding[ˈpædɪŋ] 、content

CSS 有两种盒模型：

• box-sizing: conent-box; 将盒子设置为标准模型（盒子默认为标准模型）
• box-sizing: border-box; 将盒子设置为 IE 模型（也叫做怪异盒子）

第一种盒模型是 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为

实际宽度 = width + padding + border

第二种盒模型是 border-box，即 width 指定的是左右边框外侧的距离，公式为

实际宽度 = width

相同点是都是用来指定宽度的，不同点是 border-box 更好用。

平时喜欢用 border box，因为更好用，写起来更方便。

因为 border-box 的诞生，主要就是解决 content-box 的最大缺点。 border-box 意味着子容器的 padding 和 border 的厚度都算在 50%之内，这样，你可以随意的修改 padding 和 border 的厚度值，根本不用担心父容器被撑爆，所以平时喜欢用 border box。